<template>
    <div style="padding: 20px">
        <el-card shadow="never" style="margin-top: 20px">
            <div v-if="state.isShow">
                <el-button style="margin-bottom: 15px" type="" size="mini" @click="state.isShow = false">编辑</el-button>
                <div>值班室名称：{{ state.search.name }}</div>
                <div style="margin-top: 15px">值班室电话：{{ state.search.phone }}</div>
            </div>

            <el-form :model="state.search" style="width: 600px" label-width="90px" v-else>
                <el-form-item label="值班室名称">
                    <el-input v-model="state.search.name" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="值班室电话">
                    <el-input v-model="state.search.phone" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-button type="" size="mini" @click="state.isShow = true">取消</el-button>
                    <el-button type="primary" size="mini" @click="editRoomHandle">确认</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card shadow="never" style="margin-top: 20px">
            <el-form :inline="true" ref="ruleFormRef" :model="state.pagination" label-width="90px" size="mini">
                <el-form-item label="值班室">
                    <el-input v-model="state.pagination.watch_role" placeholder="请输入值班室"></el-input>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="state.pagination.name_list" placeholder="请输入姓名查询"></el-input>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="state.pagination.phone_list" placeholder="请输入电话查询"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="state.pagination.type" placeholder="请选择状态">
                        <el-option label="白班" value="100"></el-option>
                        <el-option label="夜班" value="200"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click="hanleReset()">重置</el-button>
                    <el-button @click="hanleSearch" type="primary" size="mini">搜索</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card shadow="never" style="margin-top: 20px">
            <el-button type="primary" @click="addOrUpdate" size="mini">添加</el-button>
            <el-button type="success" @click="toDown" size="mini" plain>模板下载</el-button>
            <el-button type="success" @click="toExcel" size="mini" plain>上传模板</el-button>
            <el-button type="success" @click="hanldeBatch" size="mini" plain>批量删除</el-button>
            <el-table :data="state.list" v-loading="state.loading" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column label="值班室" prop="watch_role" min-width="80"></el-table-column>
                <el-table-column label="姓名" prop="name_list" min-width="120"></el-table-column>
                <el-table-column label="电话" min-width="120" prop="phone_list"></el-table-column>
                <el-table-column label="类型" min-width="120">
                    <template #default="{ row }">
                        <el-tag :type="row.type === 100 ? '' : 'info'">{{ row.type === 100 ? '白班' : '夜班' }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="时间" min-width="120" prop="watch_time"></el-table-column>
                <el-table-column label="职务" min-width="120" prop="duties"></el-table-column>
                <el-table-column label="操作" min-width="120">
                    <template #default="{ row }">
                        <el-button type="primary" link @click="addOrUpdate(row)">编辑</el-button>
                        <el-popconfirm confirm-button-text="删除" cancel-button-text="取消" icon="el-icon-info"
                            icon-color="red" title="确定删除？" @confirm="del(row)">
                            <template #reference>
                                <el-button link type="danger">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page-box">
                <el-pagination @current-change="hanldecurrChange" background layout="prev, pager, next"
                    :total="state.total">
                </el-pagination>
            </div>
        </el-card>

        <AddOrUpdate ref="addOrUpdateRef" @refresh="getList(1)"></AddOrUpdate>
        <UploadExcel ref="uploadRef" @refresh="getList(1)"></UploadExcel>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, toRaw } from 'vue'
import { zhiban, zhibanDel, editRoom, roomInfo, zhibanDels, zhibanInfo } from '@/api/dashboard'
import { paraphrase } from 'toolkit-x'
import { extinguisherOption, expiredTimeOption } from '@/util/explain'
import AddOrUpdate from './components/AddOrUpdate.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import UploadExcel from './components/uploadExcel.vue'

let postIds = ref([])
const handleSelectionChange = (val) => {
    postIds.value = val.map(item => {
        return item.id;
    });
}


const addOrUpdateRef = ref()
const uploadRef = ref()
const state = reactive({
    loading: false,
    isShow: true,
    search: {
        name: '',
        phone: ''
    },
    pagination: {
        pageSize: 8,
        page: 1,
        name_list: '',
        phone_list: '',
        watch_role: '',
        type: ''
    },
    total: 0,
    list: []
})



const hanldecurrChange = (e) => {
    state.pagination.page = e
    getList()
}

const hanleSearch = () => {
    getList()
}

const hanleReset = () => {
    state.pagination = {
        pageSize: 8,
        page: 1,
        name_list: '',
        phone_list: '',
        watch_role: '',
        type: ''
    }
    getList()
}

const getList = async (page = 1) => {
    state.loading = true
    if (page === 1) state.pagination.page = 1
    const { data } = await zhiban(state.pagination).finally(() => (state.loading = false))
    console.log(data);
    state.list = data.data
    state.total = data.total
}

getList()

const hanldeBatch = () => {
    if (postIds.value.length === 0) {
        return ElMessage.warning('请选择要操作的数据')
    }

    ElMessageBox.confirm('确定删除吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        zhibanDels({ ids: postIds.value }).then(res => {
            ElMessage.success(res.msg)
            getList()
        })

    }).catch(() => {
        // catch error
    })

}

const getRoomInfo = async () => {
    const { data } = await roomInfo()
    state.search.name = data.name
    state.search.phone = data.phone
}
getRoomInfo()

// 打开编辑弹框
const addOrUpdate = (row?) => {
    zhibanInfo({ id: row.id }).then(res => {
        addOrUpdateRef.value.open(res.data)
    });
}

const editRoomHandle = async () => {
    const { msg } = await editRoom(state.search)
    ElMessage.success(msg)
    state.isShow = true
    getRoomInfo()
}
const del = async (row) => {
    const { msg } = await zhibanDel({ id: row.id })
    ElMessage.success(msg)
    getList()
}
const toDown = () => {
    ElMessage.success('请留意浏览器下载文件')
    window.open('http://api.huojisuan.com/static/test001.xlsx')
}
const toExcel = () => {
    uploadRef.value.open()
}
</script>

<style lang="scss" scoped>
.page-box {
    margin-top: 10px;
}
</style>
